<template>
  <!-- 放置一个图标 -->
  <div>
    <span class="svg-container" @click="handleScreenFull">
      <!-- 切换图标 -->
      <svg-icon :icon-class="isScreenFull ? 'exit-fullscreen' : 'fullscreen'" />
    </span>
  </div>
</template>

<script>
import ScreenFull from 'screenfull'
export default {
  name: 'ScreenFull',

  data() {
    return {
      // 是否处于全屏状态：
      isScreenFull: false
    }
  },

  methods: {
    // 处理点击全屏
    handleScreenFull() {
      // 判断是否支持全屏，并且是否处于全屏状态
      if (ScreenFull.isEnabled) {
        // 全屏切换
        ScreenFull.toggle()
        this.isScreenFull = !this.isScreenFull
      } else {
        this.$message.error('抱歉，您的浏览器暂不支持全屏')
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-container{
  cursor: pointer;
}
</style>
